<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_全屏遮罩</title>
    <style>
        .mask{
            background-color:rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores autem commodi dignissimos eius
        eligendi, fuga harum id neque nostrum odit placeat praesentium provident quasi quod, saepe sequi veniam
        veritatis.
    </div>
    <div>Aspernatur aut blanditiis dolore fugiat qui ut voluptatibus! At aut commodi, cum fugit incidunt laudantium
        minima optio placeat sit temporibus, ullam voluptas voluptatem. Asperiores culpa explicabo nobis sint, sunt
        veniam.
    </div>
    <div>Ad consequatur cum dolorem doloremque earum esse eum explicabo ipsum laborum magni maiores, neque perferendis
        quidem quisquam quod! A alias atque commodi et hic officia perspiciatis quod reprehenderit unde? Numquam!
    </div>
    <div>Ab accusantium animi asperiores cupiditate deleniti ea eaque, expedita fuga in ipsa iure mollitia perferendis
        quasi quo rerum voluptate voluptates. Animi assumenda dignissimos illum itaque natus nesciunt optio quam saepe!
    </div>
    <div>Adipisci aliquid animi assumenda consectetur cumque dignissimos, eligendi error harum hic ipsa nesciunt,
        officiis quaerat quas quis tempora, tenetur unde. Cupiditate deserunt earum magni nesciunt numquam quas vero
        voluptas? Odit.
    </div>
    <div>Accusamus at dolor eveniet nesciunt nisi nulla optio provident quos sit tempora! Aperiam cum eum impedit modi
        nesciunt nisi non obcaecati officia optio ullam? Ad dignissimos ducimus facilis tenetur totam.
    </div>
    <div>Architecto, aspernatur cum dolore ea, eaque earum esse excepturi exercitationem fuga ipsa laboriosam maxime
        minima molestiae mollitia odit perspiciatis quam quas rerum similique sit soluta sunt temporibus veniam
        voluptates voluptatum.
    </div>
    <div>Amet explicabo maxime nihil rem unde! Accusamus aliquid aperiam autem corporis cum debitis eligendi error eum
        facere fugit incidunt porro, possimus, quia quos recusandae. Eveniet officiis placeat quae ut voluptas.
    </div>
    <div>Illum impedit in incidunt minus natus vero voluptate. Corporis dolor est explicabo facilis fugiat modi nisi? A
        aperiam assumenda commodi magnam maxime natus optio, quidem recusandae saepe soluta. Dolor, voluptate.
    </div>
    <div>Adipisci delectus eaque necessitatibus. Ad aliquam aut commodi cum delectus dolorem dolores ex, facere, fugiat
        ipsa, natus nobis pariatur placeat quia reiciendis repellat ut voluptas voluptates! Deleniti illum iure
        possimus.
    </div>
    <div>Amet asperiores assumenda culpa cum est ex hic id nemo nesciunt nobis obcaecati officiis perspiciatis quia
        quibusdam sit, suscipit, vel voluptatum. Accusamus accusantium delectus fuga libero, magnam molestias quaerat
        temporibus?
    </div>
    <div>Ab consectetur est eveniet quis quod ratione ullam. Minus, quas, voluptas. Adipisci aspernatur assumenda at
        atque beatae debitis dignissimos eveniet, harum ipsa nihil odit repellat repellendus reprehenderit unde veniam,
        voluptate.
    </div>
    <div>Deserunt enim esse, est et eum inventore laboriosam optio quibusdam quisquam sequi? Adipisci ducimus
        exercitationem facere libero modi necessitatibus numquam possimus quae quas sapiente? Culpa delectus eaque et
        laboriosam tempora!
    </div>
    <div>Accusamus ad assumenda dolorem earum eos expedita iste mollitia nulla provident sapiente! Amet, eius ipsa natus
        nesciunt nisi optio quis velit voluptates voluptatum. Ad aliquam delectus in tempore? Amet, perferendis!
    </div>
    <div>Deleniti eos esse, est, fuga laboriosam laudantium magnam magni maxime minima nemo nihil nisi pariatur possimus
        quod, rem repellat sequi suscipit ut. At commodi fugiat illum iure natus odio quo?
    </div>
    <div>Asperiores dolorum eligendi fugit magni natus possimus ratione reprehenderit sunt temporibus voluptatem.
        Dolorem, modi, quidem! Ab aliquam asperiores assumenda aut cumque enim illo iure, labore maiores odio saepe
        soluta vero.
    </div>
    <div>Beatae consectetur deleniti distinctio error est expedita inventore itaque laudantium magnam maiores nam
        necessitatibus neque nostrum officia officiis pariatur perferendis perspiciatis qui, tempora voluptatum! Magnam
        nulla officia placeat provident vero.
    </div>
    <div>Aperiam blanditiis deleniti distinctio ducimus eum? Aliquid asperiores deserunt dolore est eveniet facilis id
        inventore maiores modi, molestias nam natus nisi perferendis perspiciatis possimus quidem recusandae repellat
        sint soluta temporibus?
    </div>
    <div>Atque, deleniti est exercitationem modi perspiciatis praesentium quis quod recusandae saepe ut. Aperiam
        cupiditate et exercitationem fugiat in magnam neque pariatur provident quam quas quidem quos sapiente unde,
        velit voluptatem!
    </div>
    <div>Accusantium ad, aliquid architecto assumenda consectetur deleniti distinctio ducimus et exercitationem facere
        illum inventore ipsum iste iure iusto maxime non nulla possimus praesentium quibusdam quo, ratione sunt totam
        ullam voluptatum.
    </div>
    <div>Ab asperiores beatae, consequatur dicta distinctio dolore facere fugiat impedit in, ipsa iure libero maiores
        mollitia nesciunt nisi nobis perspiciatis possimus quaerat, qui rerum sed similique sit tempore unde voluptatem?
    </div>
    <div>Asperiores consequuntur ducimus eaque hic maxime natus nesciunt voluptatem, voluptatum? Accusantium hic id
        iusto nulla. Adipisci consequatur cupiditate, esse explicabo iste molestias nemo neque non nulla reiciendis sit
        vero voluptatum.
    </div>
    <div>A, aliquid, numquam? Adipisci aliquam consequuntur cupiditate ducimus earum enim ex, fugiat harum hic illo
        illum mollitia natus, neque nihil quae saepe sit! Aliquid at fugiat molestias nobis recusandae saepe.
    </div>
    <div>Accusamus ad culpa cumque dolorem earum est facere nostrum provident quam quis quisquam quod ratione
        reiciendis, sunt vitae. Animi cupiditate deleniti dignissimos incidunt quaerat quam, sapiente sequi vero
        voluptas voluptatum!
    </div>
    <div>Aliquid animi at consequatur odio omnis quam quod ratione, reprehenderit? Aspernatur atque culpa cumque
        cupiditate dolore eligendi error illum libero magnam, modi obcaecati quaerat qui reprehenderit rerum sequi sint
        vel.
    </div>
    <div>Alias blanditiis eos facere libero minus molestias, quibusdam quos ratione reiciendis voluptatibus. Accusamus
        assumenda aut deserunt inventore nam! Debitis facere harum iste minima, minus natus provident quisquam
        reprehenderit. Accusamus, iusto?
    </div>
    <div>A, accusamus alias consequatur dolore doloremque eaque ex explicabo inventore ipsam libero maiores, minima
        molestias natus, nemo neque nisi obcaecati officiis optio placeat quas repellat repudiandae sed soluta vitae
        voluptate.
    </div>
    <div>Ab amet aperiam assumenda atque beatae blanditiis consequatur deleniti dignissimos eaque illum ipsa iste nam
        non nulla odio odit optio, quo recusandae repellat similique soluta suscipit ullam, ut veritatis vitae?
    </div>
    <div>Cupiditate dignissimos dolorum ex exercitationem iste laudantium nam recusandae unde velit voluptates?
        Accusamus eum ex, fuga illo in itaque omnis optio perferendis, possimus, quas quasi reprehenderit sapiente sunt
        tempore temporibus.
    </div>
    <div>Aliquam doloribus earum exercitationem, expedita, facilis minima molestiae molestias nam quis ratione soluta
        totam ut voluptatem? A aliquam aliquid asperiores doloribus expedita itaque praesentium recusandae rerum sequi
        voluptatem. Labore, veniam?
    </div>
    <div>Accusantium aliquid amet aperiam cumque doloribus, ducimus ipsa, laudantium libero magnam minus perferendis
        quam recusandae repellat, rerum tempora? Adipisci aspernatur, at corporis facilis labore minus nisi soluta.
        Debitis, inventore quibusdam!
    </div>
    <div>Eos eveniet ex iure minima nam nesciunt omnis quibusdam. Animi ducimus earum laboriosam obcaecati saepe
        voluptate voluptates. Dolor et incidunt, ipsum, libero magni modi odio perferendis rem reprehenderit temporibus
        ut.
    </div>
    <div>A amet aperiam commodi consequatur deserunt dolore dolorem doloremque ea eius error in ipsam itaque maxime
        necessitatibus placeat, quasi quidem quis quos ratione recusandae repudiandae sint suscipit voluptas voluptatem
        voluptatum.
    </div>
    <div>Animi deleniti expedita ipsa iusto minus modi placeat repellat reprehenderit soluta ullam. Animi aperiam
        architecto assumenda atque, autem cum deleniti eveniet in, ipsum, nulla reiciendis sequi. Error laudantium magni
        veritatis.
    </div>
    <div>Accusantium ad amet cum dolor dolores dolorum exercitationem illo impedit incidunt inventore laudantium
        molestias, nulla odit officiis qui quo repellat sunt suscipit temporibus vel velit vitae voluptatibus? Deleniti
        doloribus, ratione.
    </div>
    <div>A accusantium atque, beatae distinctio dolores eligendi explicabo illo inventore ipsam iure maiores maxime, nam
        nihil optio repellat repudiandae veritatis! A alias aut cum explicabo incidunt nostrum saepe veniam
        voluptatibus.
    </div>
    <div>Asperiores ea laboriosam sit. Asperiores ea est fuga molestiae quibusdam veritatis, vero voluptatibus
        voluptatum. Aliquid hic ipsum nemo optio voluptatem? Dolores ea facilis iste nobis quas, sed temporibus velit
        vero.
    </div>
    <div>Adipisci architecto assumenda consectetur consequuntur corporis cum cumque deserunt, dolore dolorem doloremque
        ea fugit impedit, iure libero magnam maxime nesciunt odit porro quod ratione rem sed vel vero voluptatem
        voluptatibus.
    </div>
    <div>A accusamus architecto aspernatur autem cum cumque dicta ea earum ex id illo ipsum iste libero maiores minus
        molestiae perferendis perspiciatis quaerat quia, tempora temporibus vitae voluptate voluptatum? Qui, ullam.
    </div>
    <div>Eveniet expedita inventore voluptates? Ab consequatur corporis dolore dolorum ea enim eveniet ex impedit
        molestiae mollitia natus neque numquam odit pariatur praesentium provident quasi sequi soluta tempora, tempore
        vero voluptatibus.
    </div>
    <div>Adipisci animi aut consequuntur deleniti distinctio eaque ex excepturi facilis ipsum laborum minus,
        necessitatibus nemo nobis nostrum odit perspiciatis porro quam quidem quisquam quo recusandae, repudiandae
        soluta suscipit, veniam voluptatum!
    </div>
    <div>A amet ex labore laboriosam nisi, nulla pariatur quod reprehenderit similique temporibus, ullam veritatis vero
        voluptatem. Cum, doloremque, enim error illum itaque laborum magni maiores necessitatibus, optio voluptas
        voluptate voluptates!
    </div>
    <div>Ab aperiam consequuntur corporis dicta dolore ex excepturi ipsa iste itaque minus nam, placeat praesentium
        quasi qui quia temporibus totam veniam voluptatem. Aliquam aut cum delectus inventore sed suscipit vero?
    </div>
    <div>Ad commodi et placeat quia quis! Assumenda blanditiis culpa, est, fugit minus omnis, quidem quo recusandae
        repellat similique tempore tenetur. Ab aliquam dicta dolores officia officiis quia sequi voluptate voluptatibus!
    </div>
    <div>Consequatur dolore dolorem ea et explicabo fuga id ipsam ipsum modi nesciunt nulla quasi sit, sunt vitae
        voluptas! Adipisci autem deserunt eos fugit illum itaque minus natus omnis, pariatur perspiciatis.
    </div>
    <div>Accusantium cum debitis deleniti dolores excepturi fuga itaque porro praesentium rem reprehenderit. At autem,
        cupiditate enim harum id ipsum maiores minus nulla odit officiis perferendis praesentium quis saepe sequi ullam?
    </div>
    <div>Illo magnam nam sed totam voluptates. A accusantium aspernatur at enim eos ex fuga iure laboriosam maxime,
        neque quas quia quis rerum saepe sint soluta totam ullam. Adipisci omnis, soluta.
    </div>
    <div>Blanditiis libero obcaecati quidem saepe voluptas. Accusantium enim excepturi numquam quos, sit vel velit? Ab
        aperiam ducimus ea eaque eligendi, laboriosam, laborum molestias provident quia repudiandae rerum, sed sunt
        suscipit.
    </div>
    <div>Error, ipsa itaque iusto reprehenderit totam veritatis! Architecto cumque dolorem ex exercitationem fugiat
        fugit hic illum iste, itaque, pariatur possimus provident, rem rerum temporibus voluptatum. Distinctio omnis
        perspiciatis repellendus voluptatem?
    </div>
    <div>Ab alias aliquid atque autem corporis culpa deleniti enim facilis fugit impedit incidunt labore laboriosam
        magnam modi obcaecati odio officiis omnis, quae quis quo quod rem rerum tempore ut vel.
    </div>
    <div>Atque, corporis culpa doloremque ea facilis iste labore nulla officiis recusandae repellat repellendus,
        temporibus ut velit? At cum delectus doloribus enim expedita maxime minus pariatur quia quod tenetur. Ad,
        doloribus?
    </div>
    <div>Asperiores dignissimos doloremque earum error esse expedita explicabo, harum id illum laborum modi nihil
        officiis pariatur quaerat ut velit, vitae! Ab consequuntur enim fugiat ipsam itaque omnis quia sed voluptatibus?
    </div>
    <div>Accusantium aut commodi consectetur consequatur dolor dolorem, eos illum nesciunt possimus provident, quaerat
        quod recusandae sapiente. Aspernatur at, consectetur corporis deserunt dicta dolorum ipsam nulla, quaerat sit,
        soluta unde voluptate.
    </div>
    <div>Ad dicta facilis nesciunt, odio quas quidem sed similique. Animi aspernatur dicta excepturi id in maiores
        maxime neque, quis sequi sunt tenetur voluptates. Doloremque exercitationem impedit iure laborum nisi sequi.
    </div>
    <div>Beatae commodi deserunt enim error in maxime qui rem tempora ullam voluptate. Aspernatur deleniti ea iure nisi
        quidem, reiciendis rem. Eaque esse ipsam obcaecati odio odit pariatur quia sapiente sit!
    </div>
    <div>Adipisci amet at beatae, commodi eveniet id impedit itaque labore laboriosam mollitia nostrum odio quia quidem
        quis quod, tempora vitae voluptate! Ex, nemo, praesentium? Adipisci delectus doloremque perferendis ratione
        tenetur!
    </div>
    <div>Eaque, quos, unde? Atque fuga id ipsa nostrum, praesentium quaerat quasi qui tempora! Aliquam, assumenda fugit
        iste minus molestias necessitatibus nemo non nostrum quae quam, repellat repudiandae sit sunt, voluptas?
    </div>
    <div>Ad animi architecto at aut autem, beatae consequatur consequuntur culpa debitis doloremque earum eos hic, iure,
        nihil nisi numquam officiis perferendis quibusdam quisquam ratione recusandae rerum soluta tenetur totam unde!
    </div>
    <div>Adipisci delectus dolore doloribus earum eos, eveniet expedita inventore laboriosam nobis nostrum, numquam
        obcaecati odio officia, omnis possimus quia quod similique tempora ullam vero. Ad aliquid dignissimos nobis
        suscipit voluptas!
    </div>
    <div>Aliquam enim hic impedit ipsa possimus ratione repellat tempore ut. Ab aperiam at corporis fugiat, itaque
        labore libero nihil possimus, quas sed similique tempora totam voluptatibus. Magni suscipit voluptatem
        voluptates.
    </div>
</div>
</body>
</html>